/**
 * 定义一个名为RotatingImage的组件，用于实现图片的360度旋转效果
 * 该组件实现了一个鼠标悬停触发的旋转效果
 */
const RotatingImage = {
    props: {
        imageSrc: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            currentRotation: 0
        };
    },
    methods: {
        startRotation() {
            this.currentRotation = 360; // 旋转到360度
        },
        stopRotation() {
            this.currentRotation = 0; // 恢复到0度
        }
    },
    template: `
        <div class="rotating-image-container">
            <img 
                :src="imageSrc" 
                :style="{ transform: 'rotate(' + currentRotation + 'deg)' }"
                @mouseover="startRotation"
                @mouseout="stopRotation"
                class="rotating-image"
            />
        </div>
    `
};

// 注册RotatingImage组件到Vue实例中
document.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: '#app-1',
        components: {
            RotatingImage
        }
    });
});